<template>
  <div v-if="value">
    <Card>
      <p slot="title">
        <Breadcrumb separator=">">
          <Breadcrumb-item href="/">个人中心</Breadcrumb-item>
          <Breadcrumb-item href=""><span @click="bindSelect">安全中心</span>
          </Breadcrumb-item>
          <Breadcrumb-item>修改手机号</Breadcrumb-item>
        </Breadcrumb>
      </p>
      <div style="width:60%; margin: 3rem auto">
        <Steps :current="step">
          <Step title="身份验证" content=""></Step>
          <Step title="修改手机号" content=""></Step>
          <Step title="修改成功" content=""></Step>
        </Steps>
      </div>
      <Form class="baseform" :model="formItem" :rules="phoneValidate" :label-width="140">
        <FormItem label="手机号" prop="phoneNumber">
          <Input v-model="formItem.phoneNumber" placeholder="请输入手机号"></Input>
        </FormItem>
        <FormItem label="验证码" prop="code">
          <Input style="width:50%;display:inline-block;" v-model="formItem.code" placeholder="请输入验证码"></Input>
          <Button v-show="!(showtime)" style="width:48%;display:inline-block;" type="success" value="" @click="getCode">获取验证码 </Button>
          <span v-show="showtime" type="success" value="" style="display: inline-block;color: #fff;padding:0 40px;background:#19BE6B;border-radius:4px;border-color:#19be6b;vertical-align: middle;text-align: center;font-weight: 400;font-size: 16px;height: 32px;">{{ count }}</span>
        </FormItem>
        <FormItem>
          <Button style="width:100%" type="success" @click="save" value="">立即修改 </Button>
        </FormItem>
      </Form>
    </Card>

  </div>
</template>

<script>
// @ is an alias to /src

import { Component, Vue, Prop, Emit } from 'vue-property-decorator'
import ajax from '../lib/ajax'

@Component
export default class BandingPhone extends Vue {
  @Prop({ type: Boolean, default: false }) value
  get userInfo() {
    return this.$store.getters['session/user']
  }

  showtime = false
  count = 60
  step = 1
  formItem = {
    phoneNumber: '',
    code: ''
  }

  data = {
    phoneNumber: ''
  }

  @Emit('bindSelect')
  bindSelect() {
    return '2'
  }

  getCode() {
    if (this.formItem.phoneNumber !== '' && this.formItem.phoneNumber !== null) { // 1.首先判断是否未输入手机号码就点击获取验证码
      if (/^1[3456789]\d{9}$/.test(this.formItem.phoneNumber)) { // 2.使用正则判断手机输入的验证码是否符合规范
        const TIME_COUNT = 60 // 3.设置时间为60s
        if (!this.timer) {
          this.count = TIME_COUNT
          this.showtime = true
          this.getPhoneCode() // 5.调用后端获取验证码接口的函数
          let timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) { // 6.设置每秒钟递减
              this.count--
            } else { // 7.递减至0时,显示获取验证码按钮,隐藏倒计时模块,清除定时器this.timer,并将其置为null
              this.showtime = false
              clearInterval(timer)
              timer = null
            }
          }, 1000)
        }
      } else {
        this.$Message.error('手机号格式不正确!')
      }
    } else {
      this.$Message.error('请先填写手机号码!')
    }
  }

  getPhoneCode() {
    this.data.phoneNumber = this.formItem.phoneNumber
    ajax.post('getChangePhoneSmsCode', this.data).then(result => {
      if (result.data.code === 200) {
        this.$Message.success('验证码发送成功')
      }
    })
  }

  save() {
    this.$Modal.confirm({
      title: '确认',
      content: '确认要修改密码吗',
      onOk: () => {
        ajax.post('changePhone', this.formItem).then(result => {
          if (result.data.code === 200) {
            this.$store.state.session.user.phoneNumber = this.formItem.phoneNumber
            this.$Message.success('恭喜你修改成功')
            this.step = 2
          }
        })
      },
      onCancel: () => {
        this.$Message.info('取消成功')
      }
    })
  }

  phoneValidate = {
    phoneNumber: [
      { required: true, message: '手机号不能为空!', trigger: 'blur' },
      { type: 'string', pattern: /^1[3456789]\d{9}$/, message: '手机号格式有误', trigger: 'blur' }
    ],
    code: [
      { required: true, message: '验证码不能为空', trigger: 'blur' }
    ]
  }
}
</script>
<style scoped>
.baseform {
  font-size: 1.2rem;
  width: 70%;
  margin: 0 auto;
  text-align: center;
}
.user_info_title {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
.user_info_item {
  font-size: 1.4rem;
  padding: 1rem 0;
}
.user_info_item_detail {
  color: #999;
  padding-right: 1rem;
}
.des {
  margin: 0.5rem 0;
  font-size: 1.2rem;
  color: #999;
}
</style>
